<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>行情</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="applicable-device" content="mobile">
    <meta name="apple-mobile-web-app-title" content="标题">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="x5-orientation" content="portrait">
    <meta name="screen-orientation" content="portrait">
    <link rel="stylesheet" href="common/common.css"/>
    <link rel="stylesheet" href="css/Token_Start.css"/>
    <style>
        .edit-fixed-box{
            position: fixed;
            width:75%;
            top:200px;
            margin-left:12%;
            background: #FFFFFF;
            border-radius: 3px;
            display: none;
        }
        .edit-fixed-box>ul{
            padding-left:10px;
            padding-right:3px;
            font-size:16px;
            /*font-weight:bold;*/
        }
        .edit-fixed-box ul>li{
            margin-top:15px;
            margin-bottom:10px;
            padding-bottom:5px;
            color:#858484;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            border-bottom: 1px solid #000000;
        }
    </style>
</head>
<body>
<header class="Token_Start_header">
    <p>行情</p>
</header>
<div class="body-container">
    <ul class="trade-head">
        <li>资产名称</li>
        <li>涨跌幅</li>
        <li><span class="" id="editLine">▪ ▪ ▪</span></li>
    </ul>
    <ul class="trade-show" id="showCoin">
        <li class="fix-clear" >
            <div class="trade-port">Kraken</div>
            <div class="pull-left">
                <div>
                    <div class="li-icon pull-left "><img src="img/BB_dogecoin.png" alt=""/></div>
                    <div class="pull-left">
                        <div><span class="font20">BTC</span> <img src="img/K_line.png" class="K_line_img " alt=""/></div>
                       <!--  <div class="volume">成交量:<span>1245</span></div> -->
                    </div>
                </div>
            </div>
            <div class="pull-right">
                <div><span class="down-icon up_img"></span><span id="priceBTC">4587.12</span> <span class="USD">USD</span></div>
                <div class="percent"><span  class="UP_down rise" id="praventBTC"> 1.23%</span><span>涨跌幅</span></div>
            </div>
        </li>
        <li class="fix-clear" >
            <div class="trade-port">Kraken</div>
            <div class="pull-left">
                <div>
                    <div class="li-icon pull-left "><img src="img/bitcoin.png" alt=""/></div>
                    <div class="pull-left">
                        <div><span class="font20">ETH</span> <img src="img/K_line.png" class="K_line_img " alt=""/></div>                     
                    </div>
                </div>
            </div>
            <div class="pull-right">
                <div><span class="down-icon down_img"></span><span id="priceETH">4587.12</span> <span class="USD">USD</span></div>
                <div class="percent"><span  class="UP_down plus" id="praventETH"> 1.23%</span><span>涨跌幅</span></div>
            </div>
        </li>
        <li class="fix-clear" >
            <div class="trade-port">Kraken</div>
            <div class="pull-left">
                <div>
                    <div class="li-icon pull-left "><img src="img/BB_ripple.png" alt=""/></div>
                    <div class="pull-left">
                        <div><span class="font20">LTC</span> <img src="img/K_line.png" class="K_line_img " alt=""/></div>
                        <!-- <div class="volume">成交量:<span>1245</span></div> -->
                    </div>
                </div>
            </div>
            <div class="pull-right">
                <div><span class="down-icon down_img"></span><span id="priceLTC">287.12</span> <span class="USD">USD</span></div>
                <div class="percent"><span  class="UP_down plus" id="praventLTC"> 1.23%</span><span>涨跌幅</span></div>
            </div>
        </li>
        <li class="fix-clear" >
            <div class="trade-port">Kraken</div>
            <div class="pull-left">
                <div>
                    <div class="li-icon pull-left "><img src="img/bitcoin.png" alt=""/></div>
                    <div class="pull-left">
                        <div><span class="font20">ESO</span> <img src="img/K_line.png" class="K_line_img " alt=""/></div>
                        <!-- <div class="volume">成交量:<span>1245</span></div> -->
                    </div>
                </div>
            </div>
            <div class="pull-right">
                <div><span class="down-icon down_img"></span><span id="priceESO">4587.12</span> <span class="USD">USD</span></div>
                <div class="percent"><span  class="UP_down plus"> 1.23%</span><span>涨跌幅</span></div>
            </div>
        </li>
      
    </ul>
</div>
<div class="edit-fixed-box">
    <ul class="edit-box">
        <li><a href="child_hmtl/Token_Line/Token_Line_Add.html">添 加 行 情</a></li>
        <li><a href="child_hmtl/Token_Line/Token_Line_Edit.html">编 辑 行 情</a></li>
        <li><a  id="quitEdit">取 消</a></li>
    </ul>
</div>
<footer>
    <div class="foot-bottom-div">
        <ul class="foot-bottom">
            <li ><a href="child_hmtl/Token_Assets.html"><i class="icon-asset"></i><p>资产</p></a></li>
            <li class="curr"><a href="#"><i class="icon-market "></i><p>行情</p></a></li>
            <li><a href="child_hmtl/Token_Trading/Token_Trading.html"><i class="icon-trade"></i><p>交易</p></a></li>
            <li><a href="child_hmtl/Token_My.html"><i class="icon-person"></i><p>我的</p></a></li>
        </ul>
    </div>

</footer>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/data.js"></script> 
<!-- <script src="js/Token_Start.js"></script> -->
<script>
    $(".trade-show li").on("click",function () {
        location.href="child_hmtl/Token_Line/Token_Start_Kline.html"
    });
    $().ready(function(){
        $("#editLine").click(function(e){
            e.stopPropagation();
            $(".edit-fixed-box").toggle()
        });
        $("#quitEdit").click(function(e){
            e.stopPropagation();
            $(".edit-fixed-box").css("display","none");
        });
        $("body").on("click",function(){
            $(".edit-fixed-box").css("display","none");
        });
    })
    $().ready(function(){
    	 
    	var sport=["","Kraken","Binance","P网"];
    	function getName(str){
    		//console.log(str);
    		return str.split("-")[0];
    	}
    	var imgName=null;
    	$.ajax({
    		url: "/sys/exchangeRate/coinlis",
    		type:"GET",
    		success:function(r){
    			var imgName=r.doGet;
    	    	 $.ajax({
    	     		url:"/app/user_quotation/queryselect",
    	     		success:function(r){
    	     			console.log("init",r);
    	     			var flag=[],priceAll=[];
    	     				//p 网
    						$.ajax({
    							url:"/app/public/kiln?url=https://poloniex.com/public?command=returnTicker",
    							dataType:"json",
    							async:false,
    							success:function(r){console.log("p wang",r);priceAll[0]=r;flag.push("1");}
    						});
    	     				//b网
    						 $.ajax({
    							url:"/app/public/kiln?url=https://bittrex.com/api/v1.1/public/getmarketsummaries",
    							dataType:"json",
    							async:false,
    							success:function(r){
    								console.log("b wang",r);priceAll[1]=r.result2;flag.push("1");
    							}
    						})
    						//火币
    						$.ajax({
    							url:"/app/public/kiln?url=https://bittrex.com/api/v1.1/public/getmarkets",
    							dataType:"json",
    							async:false,
    							success:function(r){
    								console.log("b wang",r);priceAll[3]=r;flag.push("1");
    							}
    						})  
    	     			$(".loading-box").css("display","none");
    	     			if(r.code==0){
    	     				//var times=setInterval(function(){if(flag.length==3){clearInterval(times)}},100)
    	     				var data=r.list,html="";
    	     				var plen=data.length-1;
    	     				for(var i=0;i<plen;i++){
    	     					var nameType=data[i].type;
    	     					var oCoinNm=data[i].qname.replace("_","-");
    	     					var nameCoin=getName(oCoinNm);
    	     					var imgSrc=null;
    	     					for(var imgHttp in imgName){
    	     						if(nameCoin==imgHttp){
    	     							imgSrc=imgName[imgHttp].image
    	     						}
    	     					}
    	     					//p网最新价
    	     						var coinSell=null;//当前币种
    	     						var Binterprice=null;//最新价
    	     						var upParent=null;//涨跌幅
    	     						if(nameType==2){//b网
    	     							var BinterData=priceAll[1].result;
    	     							oCoinNm=oCoinNm.split("-");
    	     							if(oCoinNm[1]!=="ETH"){
    	     								oCoinNm=oCoinNm[1]+"-"+oCoinNm[0];
    	     							}else{
    	     								oCoinNm=oCoinNm[0]+"-"+oCoinNm[1];
    	     							}
    	     							var market=oCoinNm.toLowerCase();
    	     							$.ajax({
    	     								url:"/app/public/kiln?url=https://bittrex.com/api/v1.1/public/getmarketsummary?market="+market,
    	     								dataType:"json",
    	     								async:false,
    	     								success:function(r){
    	     									var price=r.result2.result[0];
    	     									
    	     									Binterprice=price.Last;
    	     									var PrevDay=price.PrevDay;
    	     									upParent=((Binterprice/PrevDay).toFixed(4)*100-100).toFixed(2);
    	     								}		
    	     							})
    	     							for(var j=0,len=BinterData.length;j<len;j++){
    	     								if(BinterData[j].MarketName==oCoinNm){
    	     									coinSell=BinterData[j].OpenBuyOrders;
    	     								}
    	     							}
    	     							
    	     						}else if(nameType==3){//p网
    	     							coinSell="huobi";
    	     							Binterprice="huobiPrice";
    	     							upParent="huobiParcent"
    	     						}else{
    	     							coinSell="pinter";
    	     							Binterprice="pinterPrice"
    	     							upParent="pinterParcent"
    	     						}
    	     						var upClose=upParent>0?"rise":"plus";
    	     						var upImg=upParent>0?"up_img":"down_img";
    	     						upParent>0?"+"+upParent:upParent;
    	     						html+=`<li class="fix-clear" >
        	     			            <div class="trade-port">${sport[nameType]}</div>
        	     			            <div class="pull-left">
        	     			                <div>
        	     			                    <div class="li-icon pull-left "><img src="${imgSrc}" alt=""/></div>
        	     			                    <div class="pull-left">
        	     			                        <div><span class="font20">${nameCoin}</span> <img src="img/K_line.png" class="K_line_img " alt=""/></div>
        	     			                       
        	     			                    </div>
        	     			                </div>
        	     			            </div>
        	     			            <div class="pull-right">
        	     			                <div><span class="down-icon ${upImg}"></span><span>${coinSell}</span> <span class="USD">${oCoinNm.split("-")[0]}</span></div>
        	     			                <div class="percent"><span  class="UP_down ${upClose}">${upParent}%</span><span>涨跌幅</span></div>
        	     			                <div class="market-name" data-market=${oCoinNm} data-type=${nameType}></div>
        	     			            </div>
        	     			        </li>`;
    	     				}
    	     				$("#showCoin").empty().html(html);
    	     				/* end of for data.length  */
    	     			}else{
    	     				alert(r.msg);
    	     			}
    	     		}
    	     	})
    			/* end of '/app/user_quotation/queryselect'  */
    		} 
    	})
    	/* end of 'sys/exchangeRate/coinlis'  */
    })
    //查询涨跌幅
    $().ready(function(){
    	setInterval(function(){
    		var marketList=[];
    		$("#showCoin li").map(function(index){
    			marketList[index]={};
    			marketList[index].market=$(this).find(".market-name").data("market");
    			marketList[index].type=$(this).find(".market-name").data("type");
    			marketList[index].coinPrice=$(this).find(".pull-right .down-icon+span").text();
    		})
    		for(let i=0,len=marketList.length-1;i<len;i++){
    			//b网 
    			if(marketList[i].type==2){
    				var market=marketList[i].market.toLowerCase();
    				//console.log("interval market",market);
    				$.ajax({
    					url:"/app/public/kiln?url=https://bittrex.com/api/v1.1/public/getmarketsummary?market="+market,
							dataType:"json",
							async:false,
							success:function(r){
								var price=r.result2.result[0];
								var	Binterprice=price.Last;
								var PrevDay=price.PrevDay;
								var	upParent=((Binterprice/PrevDay).toFixed(4)*100-100).toFixed(2);
								upParent>0?"+"+upParent:upParent;
								console.log(market,upParent);
								$("#showCoin li").eq(i).find(".pull-right .UP_down").text(upParent+"%");//涨跌幅
								$("#showCoin li").eq(i).find(".pull-right .down-icon+span").text(Binterprice);//现在价格
								if(upParent>0){
									$("#showCoin li").eq(i).find(".pull-right .down-icon").removeClass("down_img").addClass("up_img");
									$("#showCoin li").eq(i).find(".pull-right .UP_down").removeClass("plus").addClass("rise");
								}else{
									$("#showCoin li").eq(i).find(".pull-right .down-icon").removeClass("up_img").addClass("down_img");
									$("#showCoin li").eq(i).find(".pull-right .UP_down").removeClass("rise").addClass("plus");
								}
								/* else if(marketList[i].coinPrice==Binterprice){
									$("#showCoin li").eq(i).find(".pull-right .down-icon").removeClass("down_img").removeClass("up_img");
									$("#showCoin li").eq(i).find(".pull-right .UP_down").removeClass("plus").removeClass("rise");
								} */
							}
    	    		})
    			}
    		}
    		
    	},3000)
    })
</script>
</body>
</html>